<template>
  <div>
    <pre>
      后端分页+动态列案例：
      1、开启后端分页功能：设置backendPaging为true
      2、设置后端分页查询方法：设置backendPagingFunc事件。（组件会通过 $emit来触发该事件，传递两个参数：当前页码、每页条数）
      3、通过 $refs 调用组件的 callback方法，传递分页信息给组件。（用于组件渲染表格）
      4、开启动态列功能：设置dynamicColumnSetting属性为true
      5、设置初始隐藏的列下标数组：设置columnVisibles属性，列下标从0开始
      6、设置不允许隐藏的列下标数组：设置alwaysShowColumnIndexs属性，列下标从0开始
      7、通过展示列设置功能动态设置展示列
    </pre>

    <PageTable
      :backendPaging="true"
      @backendPagingFunc="backendPagingFunc"
      :currentPage="2"
      :pageSizes="[20,5,10]"
      :pageSize="5"
      :paging="true"
      :dynamicColumnSetting="true"
      :hidenColumnIndexs="[3]"
      :alwaysShowColumnIndexs="[1,5]"
      ref="dataTable"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="账号" prop="name"></el-table-column>
      <el-table-column label="名称" prop="nickname"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">{{ scope.row.state%2===0?'正常':'锁定' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click.stop="clickFunc(scope.row)">操作按钮</el-button>
        </template>
      </el-table-column>
    </PageTable>
  </div>
</template>

<script>
// 引入表格组件
import PageTable from "./PageTable.vue";

export default {
  components: {
    PageTable // 引用表格组件
  },
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    // 后台分页查询方法，由组件通过 $emit触发。参数为当前页码、每页条数、分页数据回调方法
    backendPagingFunc(page, size, callback) {
      var params = {};
      params.size = size;
      params.page = page;

      //模拟发送后台异步请求，延迟3s
      console.log("发送后台请求...", params);
      setTimeout(() => {
        // 模拟后台分页查询数据
        let total = 37, //总条数
          arr = new Array(total).fill("").map((_, i) => {
            i = i + 1;
            return { name: i, nickname: i, email: i, state: i };
          }),
          pageData = arr.slice(
            (params.page - 1) * params.size,
            params.page * params.size
          );
        let result = {
          data: pageData,
          total: total
        };

        console.log("后台请求返回，执行回调", result);
        // 由于是后台分页，所以需要返回当前页数据和总条数信息。约定格式为：{data:[], total:10}
        // callback(result);
        this.$refs.dataTable.callback(result);
      }, 2000);
    },
    clickFunc(row) {
      // console.log(row);
      alert(JSON.stringify(row));
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
</style>
